import React, {Component} from 'react';
import {GithubOutlined,MehOutlined,YuqueOutlined,UserAddOutlined,MediumOutlined} from '@ant-design/icons';
import {NavLink} from 'react-router-dom';
import './index.css';
class TabBar extends Component {
    state = {
        items:[
            {title:"发现",icon:GithubOutlined,path:'/found'},
            {title:"歌手",icon:MehOutlined,path:'/singer'},
            {title:"我的",icon:YuqueOutlined,path:'/mine'},
            {title:"关注",icon:UserAddOutlined,path:'/follow'},
            {title:"云村",icon:MediumOutlined,path:'/community'},
        ]
    }
    render() {
        const {items} = this.state;
        return (
            <div className={"tabbar_wrapper"}>
                <div className={"nav"}>
                    {items.map((item,index)=>{
                        return <NavLink to={item.path} className={"item"} key={index}>
                            <item.icon className={"icon"}/>
                            {item.title}
                        </NavLink>
                    })}
                </div>
            </div>
        );
    }
}

export default TabBar;